<template>
  <div class="app-container">
    <el-button type="primary" @click="handleNew">New User</el-button>
    <el-table :data="users" fit>
      <el-table-column
        label="id"
        prop="id"
      >
      </el-table-column>

      <el-table-column
        label="name"
        prop="name"
      ></el-table-column>

      <el-table-column
        label="role"
        prop="role"
      ></el-table-column>

      <el-table-column
        label="operations"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit':'New'">
      <el-form :model="user" label-width="80px" label-position="left">
        <el-form-item label="id">
          <span v-if="dialogType==='edit'">{{ user.id }}</span>
          <el-input v-else v-model="user.id" placeholder="id"></el-input>
        </el-form-item>

        <el-form-item label="name">
          <el-input v-model="user.name" placeholder="user name"></el-input>
        </el-form-item>

        <el-form-item label="role">
          <el-select v-model="user.role" placeholder="user role">
            <el-option v-for="role in roles" :key="role.roleKey" :value="role.role">
              {{ role.role }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
        <el-button type="primary" @click="confirmUser">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'

const defaultUser = {
  'id': '',
  'name': '',
  'role': null
}

export default {
  data() {
    return {
      users: [
        {
          'id': 'hanniko',
          'name': '韩敏皓',
          'role': 'ROOT'
        },
        {
          'id': 'test-user',
          'name': 'test-A',
          'role': '水表管理员'
        }
      ],
      roles:[
        {
          'roleKey': 'meter',
          'role': '水表管理员',
          'desc': '水表管理员描述'
        },
        {
          'roleKey': 'monitor',
          'role': '环境监测员',
          'desc': '环境监测员描述'
        },
        {
          'roleKey': 'installer',
          'role': '安装人员',
          'desc': '安装人员描述'
        },
        {
          'roleKey': 'root',
          'role': 'ROOT',
          'desc': '超级管理员'
        }
      ],
      user: Object.assign({}, defaultUser),
      dialogVisible: false,
      dialogType: 'new'
    }
  },

  methods: {
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.user = deepClone(scope.row)
    },
    handleDelete(scope) {
      const userIndex = this.getUserIndexById(scope.row.id)

      this.$confirm('Confirm to remove the user?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      })
      .then(() => {
        this.users.splice(userIndex, 1)
      })
    },
    handleNew() {
      this.dialogType = 'new'
      this.dialogVisible = true
      this.user = defaultUser
    },
    confirmUser() {
      const isEdit = this.dialogType === 'edit'

      if (isEdit) {
        const index = this.getUserIndexById(this.user.id)
        this.users.splice(index, 1, this.user)
      } else {
        this.users.push(this.user)
      }
      
      this.$confirm('SUCCESS', 'Info', {
        confirmButtonText: 'Yes',
        type: 'success'
      })
      .then(() => {
        this.dialogVisible = false
      })
    },
    getUserIndexById(id) {
      for (const user of this.users) {
        if (id === user.id) {
          return this.users.indexOf(user)
        }
      }
      return -1
    }
  }
}
</script>

<style>

</style>
